﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="~/Scripts/publicFunction.js"></script>
    <script src="~/Scripts/jquery-3.4.1.js"></script>

    <script src="~/Scripts/md5.js"></script>
    
    <style>
        .value_div {
            width: auto;
            height: auto;
            justify-content: center;
            align-items: center;
        }

        .home_div {
            background: #dbdcda;
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin: 0px;
        }

        body, html {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        label {
            font-size: 18px;
            min-width: 20px;
            text-align: center;
        }

        input {
            border-width: 0px;
            display: inline;
            font-size: 17px;
            width: 100%;
            height: 100%;
            margin-left: 2px;
            margin-right: 2px;
            color: black;
        }

        table {
            background: #ccfffc;
            align-items: center;
            align-content: center;
            height: 300px;
        }

        td {
            text-align: center;
            vertical-align: middle;
            align-content: center;
            align-items: center;
            background: #ffeee6;
            margin: 3px;
        }

        tr {
            width: 100%;
        }

        b {
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="home_div">
        <div class="value_div">
            <table width="700">
                <tr>
                    <td colspan="4"><b><p style="text-align: center; width: 100%; font-size: 25px; ">一个简洁翻译网页</p></b></td>
                </tr>
                <tr>
                    <td><label>输入内容:</label></td>
                    <td><input id="sendMessage" placeholder="请输入要翻译的内容" type="text" size="35"><br></td>
                    <td><button onclick="doRead('sendMessage','theAudio')"><b>阅读</b></button></td>
                    <td><label id="inputLanguageType">未识别</label></td>
                </tr>
                <tr>
                    <td><label>返回结果:</label></td>
                    <td><input type="text" readonly="readonly" id="showResponseValue" size="35"></input></td>
                    <td><button onclick="doRead('showResponseValue','theAudio')"><b>阅读</b></button></td>
                    <td><label id="showLanguageType">未识别</label></td>
                </tr>
                <tr>
                    <td colspan="4" style="width: 100%; align-content: center;">
                        <button id="goTran" style=" text-align: center; width: 100%; font-size: 20px; ">点击翻译</button>
                    </td>
                </tr>
            </table>
            <audio id="theAudio"></audio>
        </div>
    </div>
    <script type="text/javascript">
        var appid = '20230207001553767';
        var key = 'uJzWn5zSLXbFr6iPv9xU';
    var salt = (new Date).getTime();
    var from = 'en';
    var to = 'zh';

    $(function(){
        //翻译
        $("#goTran").click(function(){
            var query = $("#sendMessage").val();
            if (query.toString()=='') {
                return;
            }
            var str1 = appid + query + salt +key;
            var sign = MD5(str1);
            $.ajax({
                url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
                type: 'get',
                dataType: 'jsonp',
                data: {
                    q: query,
                    appid: appid,
                    salt: salt,
                    from: from,
                    to: to,
                    sign: sign
                },
                success: function (data) {
                    show=document.getElementById('showResponseValue');
                    show.value=data.trans_result[0].dst;

                    ResFrom=data.from;
                    ResTo=data.to;
                    FType=document.getElementById('inputLanguageType');
                    TType=document.getElementById('showLanguageType');
                    FType.innerHTML='语言类型:'+ResFrom;
                    TType.innerHTML='语言类型:'+ResTo;
                }
            });
        });
    });
    $(function () {
        $('#sendMessage').keydown(function (event) {
            if (event.keyCode==13){
                var query = $("#sendMessage").val();
                if (query.toString()=='') {return;}
                var str1 = appid + query + salt +key;
                var sign = MD5(str1);
                $.ajax({
                    url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
                    type: 'get',
                    dataType: 'jsonp',
                    data: {
                        q: query,
                        appid: appid,
                        salt: salt,
                        from: from,
                        to: to,
                        sign: sign
                    },
                    success: function (data) {
                        show=document.getElementById('showResponseValue');
                        show.value=data.trans_result[0].dst;

                        ResFrom=data.from;
                        ResTo=data.to;
                        FType=document.getElementById('inputLanguageType');
                        TType=document.getElementById('showLanguageType');
                        FType.innerHTML='语言类型:'+ResFrom;
                        TType.innerHTML='语言类型:'+ResTo;
                    }
                });
            }
        });
    });


    </script>
</body>
</html>